<template>
  <layout :showBg="false">
    <template #header>
      <pageHead title="提现详情" />
    </template>
    <view class="content">
      <view class="info">
        <view class="money">{{ info.money }}</view>
        <view class="status flex flex-a">
          <!-- 提现中 -->
          <image
            src="../../../assets/images/icons/dring.png"
            class="status-img"
            v-if="info.cashStatus == 2"
          />
          <!-- 成功 -->
          <image
            src="../../../assets/images/icons/dr-success.png"
            class="status-img"
            v-if="info.cashStatus == 0"
          />
          <!-- 失败 -->
          <image
            src="../../../assets/images/icons/dr-fail.png"
            class="status-img"
            v-if="info.cashStatus == 1"
          />
          <text style="color: #436af3" v-if="info.cashStatus == 2">
            提现中
          </text>
          <text class="c-60" v-else-if="info.cashStatus == 0">提现成功</text>
          <text style="color: #fc1313" v-else>提现失败</text>
        </view>
        <view class="row row-1">
          <text class="title">到账账户</text>
          <text class="des bank-name"
            >{{ info.bankName || "支付宝账号" }}({{
              hideNumber(info.accountNumber)
            }})</text
          >
        </view>
        <view class="row">
          <text class="title">发起时间</text>
          <text class="des bank-name">{{ info.applyTime }}</text>
        </view>
        <view class="row">
          <text class="title">到账时间</text>
          <text class="des">{{ info.receivedTime || "---" }}</text>
        </view>
        <view class="row" v-if="info.errorMsg">
          <text class="title">失败原因</text>
          <text class="des">{{ info.errorMsg || "---" }}</text>
        </view>
      </view>
      <view @click="back" class="active-btn">返回</view>
    </view>
  </layout>
</template>
<script>
import layout from "../../../compennts/layout/index.vue";
import pageHead from "../../../compennts/pageHead/index.vue";
import { drawDetail } from "../../../api/drawCash";
export default {
  components: {
    layout,
    pageHead,
  },
  data() {
    return {
      info: {
        money: 0,
        status: 1,
        accountNumber: "0",
        errorMsg: "",
      },
      statusMap: {
        "-2": "已无效",
        "-1": "已无效",
        0: "已受理",
        1: "已支付",
        2: "支付失败",
        4: "订单挂起",
        5: "支付中",
        8: "待支付",
        9: "失败",
        15: "取消支付",
        1000: "已创建",
        1001: "调用云账户API超时,等待重试",
        1002: "重试失败",
      },
      id: 0,
    };
  },
  created() {},
  onLoad(p) {
    console.log(p);
    this.id = p.id;
  },
  onShow() {
    uni.showLoading({
      mask: true,
    });
    drawDetail(this.id)
      .then((res) => {
        console.log(res);
        this.info = res.data;
      })
      .finally(() => {
        uni.hideLoading();
      });
  },
  methods: {
    hideNumber(num) {
      console.log("num:", num);
      return "********" + num.substring(num.length - 4);
    },
    back() {
      uni.navigateBack();
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../assets/styles/common.less");
.content {
  padding: 32rpx;
  background: #f7f8ff;
  height: 100%;
  .info {
    background: #fff;
    border-radius: 18rpx;
    padding: 64rpx 32rpx;
    .money {
      font-size: 56rpx;
      font-weight: bold;
      display: flex;
      justify-content: center;
      margin-bottom: 16rpx;
    }
  }
  .status {
    justify-content: center;
    svg {
      margin-right: 8rpx;
    }
    .status-img {
      width: 40rpx;
      height: 40rpx;
      margin-right: 8rpx;
    }
  }
  .row {
    display: flex;
    justify-content: space-between;
    margin-top: 24rpx;
    .title {
      color: rgba(7, 11, 28, 0.6);
      flex-shrink: 0;
    }
    .des {
      color: rgba(7, 11, 28, 0.4);
      margin-left: 48rpx;
    }
    &.row-1 {
      margin-top: 48rpx;
      .des {
        color: rgba(7, 11, 28, 0.9);
      }
    }
  }
  .active-btn {
    height: 88rpx;
    margin-top: 64rpx;
  }
}
</style>
